<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="550" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for the diagram
    const xS = 100;
    const yGround = 350;
    const d = 300;
    const H = 180;
    const h = 40;

    const xD = xS + d;
    const xMid = xS + d / 2;
    const yP1 = yGround - H; // y of the solid reflector
    const yP2 = yP1 - h; // y of the dashed reflector

    // Styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 20px Times New Roman';

    // Helper function to draw filled arrowheads for dimensions
    function drawArrowHead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.lineTo(-size, size / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
    
    // Helper function to draw arrows on the wave paths
    function drawPathArrow(ctx, x, y, angle) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(8, 4);
        ctx.lineTo(0, 0);
        ctx.lineTo(8, -4);
        ctx.stroke();
        ctx.restore();
    }

    // 1. Draw the ground
    ctx.beginPath();
    ctx.moveTo(xS - 50, yGround);
    ctx.lineTo(xD + 50, yGround);
    ctx.stroke();
    // Hatching for the ground
    ctx.lineWidth = 1;
    for (let i = xS - 50; i < xD + 50; i += 10) {
        ctx.beginPath();
        ctx.moveTo(i, yGround);
        ctx.lineTo(i - 7, yGround + 7);
        ctx.stroke();
    }
    
    // 2. Draw points S and D
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.arc(xS, yGround, 4, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('S', xS - 25, yGround + 8);

    ctx.beginPath();
    ctx.arc(xD, yGround, 4, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('D', xD + 10, yGround + 8);

    // 3. Draw the solid path
    ctx.beginPath();
    ctx.moveTo(xS, yGround);
    ctx.lineTo(xMid, yP1);
    ctx.lineTo(xD, yGround);
    ctx.stroke();

    // 4. Draw the dashed path
    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    ctx.moveTo(xS, yGround);
    ctx.lineTo(xMid, yP2);
    ctx.lineTo(xD, yGround);
    ctx.stroke();
    
    // 5. Draw the reflector lines
    ctx.setLineDash([]); // Reset to solid line
    ctx.beginPath();
    ctx.moveTo(xMid - 70, yP1);
    ctx.lineTo(xMid + 70, yP1);
    ctx.stroke();

    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    ctx.moveTo(xMid - 90, yP2);
    ctx.lineTo(xMid + 90, yP2);
    ctx.stroke();
    ctx.setLineDash([]);

    // 6. Draw arrows on the solid path
    const angle_S_P1 = Math.atan2(yP1 - yGround, xMid - xS);
    const mid_S_P1_x = (xS + xMid) / 2;
    const mid_S_P1_y = (yGround + yP1) / 2;
    drawPathArrow(ctx, mid_S_P1_x, mid_S_P1_y, angle_S_P1);

    const angle_P1_D = Math.atan2(yGround - yP1, xD - xMid);
    const mid_P1_D_x = (xMid + xD) / 2;
    const mid_P1_D_y = (yP1 + yGround) / 2;
    drawPathArrow(ctx, mid_P1_D_x, mid_P1_D_y, angle_P1_D);
    
    // 7. Draw dimension lines
    ctx.lineWidth = 1;

    // Dimension 'd'
    const yDimD = yGround + 30;
    ctx.beginPath();
    ctx.moveTo(xS, yGround + 15);
    ctx.lineTo(xD, yGround + 15);
    ctx.stroke();
    drawArrowHead(ctx, xS, yGround + 15, Math.PI, 8);
    drawArrowHead(ctx, xD, yGround + 15, 0, 8);
    // Ticks for 'd'
    ctx.beginPath();
    ctx.moveTo(xS, yGround);
    ctx.lineTo(xS, yDimD);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(xD, yGround);
    ctx.lineTo(xD, yDimD);
    ctx.stroke();
    ctx.fillText('d', xMid - 5, yGround + 25);

    // Right-side dimensions 'H' and 'h'
    const xDimRight = xD + 60;

    // Extension lines
    ctx.setLineDash([4, 2]);
    ctx.beginPath();
    ctx.moveTo(xMid, yP2);
    ctx.lineTo(xDimRight, yP2);
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.beginPath();
    ctx.moveTo(xMid, yP1);
    ctx.lineTo(xDimRight, yP1);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(xD, yGround);
    ctx.lineTo(xDimRight, yGround);
    ctx.stroke();

    // Dimension line for 'H'
    const xDimLine_H = xDimRight - 15;
    ctx.beginPath();
    ctx.moveTo(xDimLine_H, yP1);
    ctx.lineTo(xDimLine_H, yGround);
    ctx.stroke();
    drawArrowHead(ctx, xDimLine_H, yP1, Math.PI / 2, 8);
    drawArrowHead(ctx, xDimLine_H, yGround, -Math.PI / 2, 8);
    ctx.fillText('H', xDimLine_H + 10, (yP1 + yGround) / 2 + 8);
    
    // Dimension line for 'h'
    const xDimLine_h = xDimRight - 40;
    ctx.beginPath();
    ctx.moveTo(xDimLine_h, yP2);
    ctx.lineTo(xDimLine_h, yP1);
    ctx.stroke();
    drawArrowHead(ctx, xDimLine_h, yP2, Math.PI / 2, 8);
    drawArrowHead(ctx, xDimLine_h, yP1, -Math.PI / 2, 8);
    ctx.fillText('h', xDimLine_h + 10, (yP2 + yP1) / 2 + 8);

    // 8. Add the bottom label
    ctx.font = '20px sans-serif';
    ctx.fillText('习题 11-25 图', xMid - 50, yGround + 70);

</script>
</body>
</html>